import React, { useEffect, useState } from 'react';
import { request } from '../../../network/request';
import {Toast ,WhiteSpace ,Tabs,Pagination,Icon,ListView,WingBlank,Card} from 'antd-mobile'

import './search.css'
import SearchNews from './searchdetail/search-news'
import SearchVideo from './searchdetail/search-video'
import SearchPeople from './searchdetail/search-people'
import { Spin } from 'antd';
import {getsearchres} from '../../../network/search'
import { set } from 'immutable';



const Search = (props) => {
    const [tabs,settabs] = useState([])
    const [keyword,setkeyword] = useState("")
    const [page,setpage] = useState(1)
   
    const [isnewsoading,setisnewsoading] = useState(true)

    useEffect(()=>{
        props.history.listen(route=>{
            const path = route.pathname
            if(path.indexOf('/main/home/search/')!== -1){
                const change_word = path.slice('/main/home/search/'.length)
                setkeyword(change_word)
                setpage(1)
                setisnewsoading(true)
                console.log(change_word);
                get_search_res(change_word,page)  
            }
        })
        const{ keyword } = props.match.params
        setkeyword(keyword)
        
        
        const get_search_res = async(word,page) =>{
            const searchres = await getsearchres(word,page)
            const search_data = searchres.data
            
            const {article:search_news,people:search_people,video:search_video} = search_data
            const temp_tabs =  [{title: '新闻'},{title: '人物'},{title: '视频'}]
            console.log(search_news);
            temp_tabs[0].data = search_news.content 
            temp_tabs[0].totalpage = search_news.totalPages
            temp_tabs[1].data = search_people.list 
            temp_tabs[1].totalpage = search_people.pages
            temp_tabs[2].data = search_video.list 
            temp_tabs[2].totalpage = search_video.pages
            
            settabs(temp_tabs)
            

            setisnewsoading(false)
        }   
        get_search_res(keyword,page)  
       
    },[])


    
    const onchange = (tab) =>{
       
    }


    
    return(
        <div className="search">
            { 
            <Spin spinning={isnewsoading}>
                 <div>
                    <WhiteSpace />
                        <Tabs tabs={tabs} onChange={onchange} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
                            {tab => {

                                return (
                                <div className="render-content">
                                <div className="search-content">
                                      {
                                          
                                          tab.title === '新闻' ? 
                                          <SearchNews tab={tab} keyword={keyword}/>
                                          :tab.title ==='人物' ? 
                                          <SearchPeople tab={tab} keyword={keyword}/>
                                          :<SearchVideo tab={tab} keyword={keyword}/>
                                      }
                                      
                                  </div>
                                
                              </div>)
                            }}
                            
                        </Tabs>
                    <WhiteSpace />

                    
               </div>
            </Spin> 
              
            }
            
        </div> 
    )
}



 
export default Search;